<template>
	<view class="h-bottom savebottom">
		<view class="h-bottom-cont" v-for="(item,index) in tabbar" :key="index" @click="navto(index)">
			<image :src="item.bol?item.image1:item.image" mode="widthFix"></image>
			<view :class="item.bol?'xuanz':''">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['state'],
		data() {
			return {
				tabbar: [{
					name: '首页',
					image: '/static/Home_Icon/home.png',
					image1: '/static/Home_Icon/home1.png',
					bol: false
				}, {
					name: '线上商城',
					image: '/static/Home_Icon/xian.png',
					image1: '/static/Home_Icon/xian1.png',
					bol: false
				}, 
				{
					name: '本地团购',
					image: '/static/Home_Icon/tuan.png',
					image1: '/static/Home_Icon/tuan1.png',
					bol: false
				}, 
				{
					name: '订单',
					image: '/static/Home_Icon/ding.png',
					image1: '/static/Home_Icon/ding1.png',
					bol: false
				}, {
					name: '我的',
					image: '/static/Home_Icon/user.png',
					image1: '/static/Home_Icon/user1.png',
					bol: false
				}]
			};
		},
		mounted() {
			for (let i in this.tabbar) {
				this.tabbar[i].bol = i == this.state ? true : false;
			}
		},
		methods: {
			navto(e) {
				var url = '';
				switch (e) {
					case 0:
						url = '/pages/index/index'
						break;
					case 1:
						url = '/pages/goodlist/goodlist'
						break;
					// case 2:
					// 	url = '/pages/shoptab/shoplist'
					// 	break;
					case 2:
						url = '/pages/index/order'
						break;
					case 3:
						url = '/pages/individualism/user'
						break;
				}
				uni.switchTab({
					url
				})
			}
		}
	}
</script>

<style>
	.h-bottom {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		max-width: 650px;
		height: 100upx;
		color: rgb(192, 196, 204);
		border-top: 1px rgb(192, 196, 204) solid;
		display: flex;
		justify-content: center;
		font-size: 20upx;
		align-items: center;
		z-index: 999;
	}

	.savebottom {
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
	}

	.h-bottom-cont {
		flex: 1;
		text-align: center;
	}

	.h-bottom-cont image {
		position: relative;
		/* top: -2upx; */
		width: 48upx;
		height: 48upx;
	}

	.h-bottom-cont view {
		line-height: 28upx;
	}

	.xuanz {
		color: $bg-color;
	}
</style>
